<template>
  <div class="hello">
    <el-table ref="tableRef" :header-cell-style="{backgroundColor: 'rgba(0,0,0,0.3)',textAlign:'left','border':'0','color':'#fff'}"
     :cell-style="{ backgroundColor: 'transparent',textAlign:'left','border':'0' }" :data="footerRight" size="mini"
     show-summary>
    	<el-table-column v-for="item in footerRight[0]" :label="item.name" width="120">
    		<template slot-scope="scope">
    			<span>{{item.value}}</span>
    		</template>
    	</el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
  	return {
		footerRight:[[{
			"name":'河北省',
			"value":100
		},{
			"name":'北京',
			"value":100
		}	,{
			"name":'天津',
			"value":100
		}	,{
			"name":'天津',
			"value":100
		}		,{
			"name":'天津',
			"value":100
		}		,{
			"name":'天津',
			"value":100
		}		,{
			"name":'天津',
			"value":100
		}		,{
			"name":'天津',
			"value":100
		}		,{
			"name":'天津',
			"value":100
		}		,{
			"name":'天津',
			"value":100
		}		,{
			"name":'天津',
			"value":100
		}		,{
			"name":'天津',
			"value":100
		}		,{
			"name":'天津',
			"value":100
		}		,{
			"name":'天津',
			"value":100
		}			,{
			"name":'天津',
			"value":100
		}	
		]]
	}
	},
	watch: {
		footerRight: function() {
			let _this = this;
			this.$nextTick(() => {
				var length = _this.$refs.tableRef.$refs.footerWrapper.querySelector('.el-table__footer').querySelectorAll('td')
					.length;
				if (length != 0) {
					for (var i = 0; i < length; i++) {
						let html = _this.$refs.tableRef.$refs.footerWrapper.querySelector('.el-table__footer').querySelectorAll('td')[
							i].querySelector('.cell');
						// html.innerHTML = "<span @click='test()'>"+_this.databaseType+"</span>";
						// console.log(window)
						if(i == 0){
							html.innerHTML = '<a style="color:black;cursor:pointer;font-size: 16px;">' +
								'第一个' +
								'</a>';
						}else{
							html.innerHTML = '<a data-index='+i+' style="color:black;cursor:pointer;font-size: 16px;">' +
								'查看' +
								'</a>';
						}
						
						html.onclick = function(e) {
							// console.log()
							var index = e.target.dataset.index
							_this.test(_this.footerRight[0][index])
						}
					}
	
				}
	
			})
		}
	},
	mounted() {
		/* 这个只是为了触发一下watch方法，在项目中一般都是获取后台数据  所以可以省略 */
		this.footerRight[0].push({
			"name":'四川省',
			"value":100
		})
	},
	methods:{
		test(param){
			this.$message.success(param.name)
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}


</style>
<style>
	/* 此处样式 是解决table表格出现横向滚动条时， 合并栏在滚动条下方的问题 */
	.el-table{
	    overflow: auto !important;
	}
	.el-table__header-wrapper, 
	.el-table__body-wrapper, 
	.el-table__footer-wrapper{
	         overflow:visible !important;     
	   }
	.el-table__body-wrapper{
	   overflow-x:visible !important;
	 }
	 /* 这个是为了解决前面样式覆盖之后伪类带出来的竖线 */
	.el-table::after{
	   position: relative;
	}
</style>
